{extend name="./public/base" /}
{block name="title"}搜索列表{/block}
{block name="style"}
<style type="text/css">
    .content{
        text-align: center;
        margin: auto;
        background-color:#fff;
        font-size: 12px
        color: #6e5858;
    }
    .top{
        width: 100%;
        background-color: #ffba58;;
        height: 35px;
        color: #fff;
        text-align: center;
        line-height: 35px;
        font-size: 14px
    }

    
    
    .line{
        height: 2px;
        background-color: #edecec;
        margin: 16px auto;
        width: 90%;
    }
    .item{
        width: 96%;
        margin: auto;
        margin-top: 20px;
    }
    

    .item .title span{
        display: inline-block;
    }

    .item .title .dot{
        width: 20px;
        height: 50px;
        background-color: #ffba58;
        border-radius: 10px;
        position: relative;
        top: 10px;
    }

    .item .title .title_{
        font-size: 38px;
        font-weight: 600;
    }

    .item .item_content{
        margin: 30px;
    }

    .item .item_content span{
        display: inline-block;
        padding: 0 30px;
        border-radius: 20px;
        background-color:antiquewhite;
        margin-left: 30px;
        margin-top:18px;
    }
    .item .item_content .span{
        display: inline-block;
        padding: 0 30px;
        border-radius: 20px;
        background-color:#efeff491;
        margin-left: 30px;
        margin-top:18px;
    }
    .back{
        float: left;
        margin-top: 8px;
    }
    .back img{
        width: 20px;
    }

    .info_list{
        margin:auto;
        width: 90%;
        color: #8c90a6;
        font-size: 12px
        margin-top: 60px;
    }
    .info_list .item{ 
        
    }

    .info_list .item span{
        display: inline-block;
    }
    .info_list .item .lable{
        width: 46%;
        text-align: left;
    
    }
    .info_list .item .value{
     width: 50%;
    }
    
    .info .tags_line1 .my_tag{
        width: 33%;
        text-align: center;
        padding-left: 0;
        padding-bottom:40px;
    }
    
    .button{
        height:40px;
        background-color: #ffba58;
        color:#fff;
        text-align: center;
        line-height: 40px;
        width:90%;
        margin:20px auto;
        border-radius: 40px;
    }
</style>
{/block}
{block name="main"}
    <div id="app_content" class="content"> 
        <div class="top" >
            <span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
            <span>{{title}}</span>
        </div>
        <div class="info_list">
                <div class="my_info show">
                    <div class="item">
                    <span class="lable">性别:</span><span class="value"><input class="weui-input" type="text" id="gender" v-model="gender_name"></span>
                    </div>
                    <div class="line"></div>
                    <div class="item">
                        <span class="lable">年龄:</span><span class="value"><input class="weui-input" type="text" id="age" v-model="age_name"></span>
                    </div>
                    <div class="line"></div>
                    <div class="item">
                        <span class="lable">身高:</span><span class="value"><input class="weui-input" type="text" id="height" v-model="height_name"></span>
                    </div>
                    <div class="line"></div>
                    <div class="item">
                        <span class="lable">收入:</span><span class="value"><input class="weui-input" type="text" id="income" v-model="income_name"></span>
                    </div>
                    <div class="line"></div>
                    <div class="item">
                        <span class="lable">学历:</span><span class="value"><input class="weui-input" type="text" id="education" v-model="education_name"></span>
                    </div>
                    <div class="line"></div>
                    <div class="item">
                        <span class="lable">籍贯:</span><span class="value"><input class="weui-input" type="text" id="birth_city"></span>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="button" @click="submit">开始搜索</div>
            </div>
    </div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
        var host = "http://"+document.domain+"/api.php/";
        var vm  = new Vue({
            el: '#app_content',
            data: {
                info: [],
                title:'查询条件',
                age:'',
                age_name:"不限",
                height:'',
                height_name:"不限",
                gender:'',
                gender_name:"不限",
                income_id:'',
                income_name:"不限",
                birth_city:'',
                birth_city_name:"不限",
                education_id:'',
                education_name:"不限",
                education_data:[],
                education_data_standar:[],
                income_data:[],
                income_data_standar:[],
            },
            methods:{
                getEducationList:function(){
                    var t = this;
                    $.ajax({
                        async:false,
                        url: host+'Cate/param',
                        type: 'post',
                        dataType: 'json',
                        data: {table:'education'},
                        success:function(data){
                            if(data.code == 1){
                                education_data =  JSON.parse(JSON.stringify(data.data.data1));
                                education_data_standar = JSON.parse(JSON.stringify(data.data.data));
                                education_data.unshift({'title':'不限','value':0});
                                t.education_data = education_data;
                                t.education_data_standar = education_data_standar;  
                            }
                            console.log(education_data);
                        },
                        error:function(e){
                            console.log('error'+e);
                        }
                    })  
                },
                getIncomeList:function(){
                    var t = this;
                    $.ajax({
                        async:false,
                        url: host+'Cate/param',
                        type: 'post',
                        dataType: 'json',
                        data: {table:'income'},
                        success:function(data){
                            if(data.code == 1){
                                income_data =  JSON.parse(JSON.stringify(data.data.data1));
                                income_data_standar = JSON.parse(JSON.stringify(data.data.data));
                                income_data.unshift({'title':'不限','value':0});
                                t.income_data = income_data;
                                t.income_data_standar = income_data_standar;
                            }
                        },
                        error:function(e){
                            console.log('error'+e);
                        }
                    })  
                },
                submit:function(){
                    var t = this;
                    var gender = t.gender;
                    var age = t.age;
                    var height = t.height;
                    var income_id = t.income_id;
                    var education_id = t.education_id;
                    var birth_city = t.birth_city;
                    console.log('gender'+gender);console.log('age'+age);console.log('height'+height);console.log('income_id'+income_id);console.log('education_id'+education_id);console.log('birth_city'+birth_city);
                    //return;
                    window.location.href="{:url('search_list')}?gender="+gender+"&age="+age+"&height="+height+"&income_id="+income_id+"&education_id="+education_id+"&birth_city="+birth_city;
                },
            },
            mounted: function () {
                console.log("已初始化");
                this.getIncomeList();
                this.getEducationList();
            }

        });

        $("#gender").select({
            title: "请选择搜索性别",
            items: [{'title':'不限','value':0},{'title':'男','value':1},{'title':'女','value':2}] ,
            onChange: function(result){
                vm.gender = result.values;
            },
        });
        $("#height").select({
            title: "请选择搜索身高",
            items: [{'title':'不限','value':0},{'title':'150-155','value':'150-155'},{'title':'155-160','value':'155-160'},{'title':'160-165','value':'160-165'},{'title':'165-170','value':'165-170'},{'title':'170-175','value':'170-175'},{'title':'175-180','value':'175-180'},{'title':'180-185','value':'180-185'},{'title':'185-190','value':'185-190'}],
            onChange: function(result){
                vm.height = result.values;
            },
        });

        $("#age").select({
            title: "请选择搜索年龄",
            items: [{'title':'不限','value':0},{'title':'18-21','value':'18-21'},{'title':'21-25','value':'21-25'},{'title':'25-30','value':'25-30'},{'title':'30-35','value':'30-35'},{'title':'35-40','value':'35-40'},{'title':'40-45','value':'40-45'},{'title':'45-50','value':'45-50'},{'title':'50-55','value':'50-55'}],
            onChange: function(result){
                vm.age = result.values;
            },
        });
        $("#education").select({
            title: "请选择搜索学历",
            items: vm.education_data,
            onChange: function(result){
                vm.education_id = result.values;
            },
        });
        $("#income").select({
            title: "请选择搜索收入",
            items: vm.income_data,
            onChange: function(result){
                console.log(result.values);
                vm.income_id = result.values;
            },
        });
        $("#birth_city").cityPicker({
            title: "请选择您的籍贯",
            onChange: function(result){
                console.log(result.displayValue);
                var birthCity = result.displayValue.join('-');
                vm.birth_city = birthCity;
            }, 
        });
        
    });
</script>
{/block}